﻿<!DOCTYPE HTML>
<html>
<head>
	<script src="__PUBLIC__/Jcrop/js/jquery.min.js"></script>
	<script src="__PUBLIC__/Jcrop/js/jquery.Jcrop.min.js"></script>
	<link rel="stylesheet" href="jcrop.css" type="text/css" />
	<link rel="stylesheet" href="__PUBLIC__/Jcrop/css/jquery.Jcrop.css" type="text/css" />

	<script language="Javascript">

        $(function(){

            $('#cropbox').Jcrop({
                aspectRatio: 1,
                onSelect: updateCoords,
                setSelect: [100,100,300,300],
                minSize:[200,200],
                addClass: 'custom',
                bgColor: 'yellow',
                bgOpacity: .8,
                sideHandles: false


            });

        });

        function updateCoords(c)
        {
            $('#x').val(c.x);
            $('#y').val(c.y);
            $('#w').val(c.w);
            $('#h').val(c.h);
        };

        function checkCoords()
        {
            if (parseInt($('#w').val())) return true;
            alert('Please select a crop region then press submit.');
            return false;
        };

	</script>
</head>

<body>
<div id="outer">
	<div class="jcExample">
		<div class="article">

			<h1>Jcrop - Crop Behavior</h1>

			<!-- This is the image we're attaching Jcrop to -->
			<img src="jcrop.jpg" id="cropbox" />

			<!-- This is the form that our event handler fills -->
			<form action="jcrop.php" method="post" onsubmit="return checkCoords();">
				<input type="hidden" id="x" name="x" />
				<input type="hidden" id="y" name="y" />
				<input type="hidden" id="w" name="w" />
				<input type="hidden" id="h" name="h" />
				<input type="submit" value="Crop Image" />
			</form>

			<p>
				<b>An example server-side crop script.</b> Hidden form values
				are set when a selection is made. If you press the <i>Crop Image</i>
				button, the form will be submitted and a 150x150 thumbnail will be
				dumped to the browser. Try it!
			</p>

			<div id="dl_links">
				<a href="http://deepliquid.com/content/Jcrop.html">Jcrop Home</a> |
				<a href="http://deepliquid.com/content/Jcrop_Manual.html">Manual (Docs)</a>
			</div>


		</div>
	</div>
</div>
</body>